<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view>  
		<!-- #endif -->  
		<view class="item" :key="index" v-for="(items,index) in dataArr" @tap="handleLogin()">
			<image :src="src" lazy-load="true"></image>
			<view class="item-con">
				<view class="top-con">
					<text class="title">池子同款拜托了冰箱骄子牧场速食羊杂汤内蒙古羊肉汤即食熟食小吃熟食小吃熟食小吃熟食小吃</text>
					<text class="num">月销1.3万笔</text><text class="shop ml40">我是文案</text>
				</view>
				<view class="price-con">
					<view class="price">
						￥390.
						<text class="price-dian">00</text>
						<text class="gray">免运费</text>
					</view>
					<text class="dian" @tap.stop="share">...</text>
				</view>
			</view>
		</view>
		<uni-load-more v-show="dataFlag" status="loading"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				dataFlag:false,
				title: 'Hello',
				dataArr:[1,1,1,1,11,2,3,4,5,6,7],
				src:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2732298544,300309553&fm=26&gp=0.jpg"
			};
		},
		components: {uniLoadMore},
		onLoad() {
		},
		onReachBottom:function(){
			if(this.dataFlag) return;
			this.dataFlag=true;
			console.log("加载数据")
			setTimeout(()=>{
				this.dataArr=[...this.dataArr,...[1,2,3,4,5,6,7,8,9]];
				this.dataFlag=false;
			},1000)
		},
		methods: {
			share(){
				console.log(123)	
			},
			handleLogin(){
				this.$toPage("../list/buy")
			}
		}
	};
</script>

<style>
	.status_bar {  
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #F8F8F8;  
	}
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color: #F8F8F8;  
		top: 0;  
		z-index: 999;  
	}  
	.item {
		display: flex;
		justify-content: space-between;margin-bottom: 20upx;
	}
	.item image{width: 250upx;height: 205upx;}
	.item text{display: block;}
	.item .item-con{font-size:28upx;width: 460upx;height: 205upx;display: flex;
	padding-right: 20upx;
	justify-content: space-between;flex-direction: column ;}
	.item .item-con .title{width: 100%;overflow: hidden; margin-bottom: 5upx;   
	overflow: hidden;height: 80upx;line-height:40upx;text-align: justify;}
	.item .item-con .shop,.item .item-con .num{display: inline-block;font-size: 24upx;color: #999;}
	.item .price-con{display: flex;justify-content: space-between;align-items: center;color: #ff3600;}
	.item .price-con .price{font-size: 36upx;display: flex;align-items: flex-end;}
	.item .price-con .price *{display: inline-block;}
	.item .price-con .price-dian{font-size: 24upx;}
	.item .price-con .gray{font-size: 28upx;color: #999;margin-left: 20upx;}
	.item .price-con .dian{color: #999;}
</style>
